﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/style.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="/static/s/css/page.css" />
		<title>首页</title>
        <style>
        #divout {
            max-width: 1920px;
            position: relative;
            margin: 0 auto;
        }

        .imgdiv img {
            width: 100%;
        }

        .imgdiv {
            display: none;
        }

        .dotdiv {
            text-align: center;
            position: absolute;
            width: 100%;
            bottom: -30px;
        }

        .dot {
            width: 16px;
            height: 16px;
            display: inline-block;
            background: #bbbbbb;
            border-radius: 10px;
            margin: 0 12px;
        }

        .title {
            font-size: 18px;
            color: #f2f2f2;
            position: absolute;
            text-align: center;
            font-weight: 700;
            width: 100%;
            bottom: 10px;
        }

        .active {
            background-color: #717171;
        }

        #arrow {
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 100%;
            opacity: .3;
            transition: opacity 2s;
        }

        #divout:hover #arrow {
            opacity: .9;
        }

        #arrow img {
            cursor: pointer;
        }

        .imgdiv {
            animation: fade 1.5s;
        }

        @keyframes fade {
            from {
                opacity: .3;
            }

            to {
                opacity: 1;
            }
        }
    </style>
	</head>
<body id="c">
<!--轮播图-->
    <!--    div#divout>(div.imgdiv>img+div.title{标题文本$})*4 +(div.dotdiv>span.dot*4)-->
    <div id="divout">
        <div class="imgdiv" style="display: block">
            <img src="/static/0.jpg" alt="">
            <div class="title">标题文本1</div>
        </div>
        <div class="imgdiv">
            <img src="/static/1.jpg" alt="">
            <div class="title">标题文本2</div>
        </div>
        <div class="imgdiv">
            <img src="/static/2.jpg" alt="">
            <div class="title">标题文本3</div>
        </div>
        <div class="imgdiv">
            <img src="/static/3.jpg" alt="">
            <div class="title">标题文本4</div>
        </div>
        <div class="dotdiv">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>
<!--排版-->
<div class="schedule">
		<div class="container">
		<h2 class="agileinfo_header">Welcome</h2>
		<p class="agile_para">B站排行榜的密码🗯</p>
			<div>
				<div class="l">
                    <p>排行榜关联度关系图：
				<iframe src="/static/s/html/计算指标.html" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
                    </p>
				</div>
				<div class="r">
                    <p>热门标签词云图：
					<iframe src="/static/s/html/热门标签词云图.html" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
                    </p>
				</div>
                <p>排行榜影响力最强的分区占比：</p>
				<div class="f">
                     <iframe src="/static/s/html/排名关联度最大的各区占比情况.html" frameborder="0" width="90%" height="100%" scrolling="no"></iframe>
                </div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="/static/s/js/jquery.min.js"></script>
<script>
    var imgIndex = 0;
    var imgDivArr = document.getElementsByClassName("imgdiv");
    var dotArr = document.getElementsByClassName("dot");
    /**
     *  播放图片
     *  参数r：是否正放，若为true，正放。若为false，倒放
     */
    function picplay(r) {
        for (let i = 0; i < imgDivArr.length; i++) {
            imgDivArr[i].style.display = "none";
            dotArr[i].className = "dot";
        }
        if (r) {
            imgIndex++;
            imgIndex = (imgIndex >= imgDivArr.length) ? 0 : imgIndex;
        } else {
            imgIndex--;
            imgIndex = (imgIndex < 0) ? imgDivArr.length - 1 : imgIndex;
        }
        imgDivArr[imgIndex].style.display = "block";
        dotArr[imgIndex].className = "dot active";
    }
    setInterval(picplay, 3000, true);

</script>

</body>
</html>